<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar title="栏目管理" left-arrow @click-left="getindex" />

    <div class="container">
      <!-- 删除频道 -->
      <div class="del">
        <span>点击删除一下频道</span>
      </div>
      <div class="delList">
        <van-button
          @click="del(i)"
          type="default"
          v-for="(item,i) in delList"
          :key="item.id"
        >{{item.name}}</van-button>
      </div>
      <!-- 添加频道 -->
      <div class="add">
        <span>点击添加以下频道</span>
      </div>
      <div class="addList">
        <van-button
          @click="add(i)"
          type="default"
          v-for="(item,i) in addList"
          :key="item.id"
        >{{item.name}}</van-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      delList: [],
      addList: []
    }
  },
  created() {
    this.getItem()
  },
  methods: {
    getindex() {
      this.$router.push('/index')
    },
    async getItem() {
      const { data: res } = await this.$http.get('/category')
      console.log(res)
      this.delList = res.data
      const delList = JSON.parse(localStorage.getItem('delList'))
      const addList = JSON.parse(localStorage.getItem('addList'))
      if (delList) {
        this.delList = delList
        this.addList = addList
      }
    },
    del(i) {
      if (this.delList.length === 1) {
        return
      }
      this.addList.push(this.delList[i])
      this.delList.splice(i, 1)
    },
    add(i) {
      this.delList.push(this.addList[i])
      this.addList.splice(i, 1)
    }
  },
  watch: {
    delList() {
      localStorage.setItem('delList', JSON.stringify(this.delList))
      localStorage.setItem('addList', JSON.stringify(this.addList))
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  padding: 0 4.167vw;
}
div.del,
.add {
  margin: 2.778vw 0;
  padding-left: 2.778vw;
  font-size: 3.333vw;
  color: #716c68;
}
.van-button {
  height: 10.556vw;
  font-size: 4.444vw;
}
div.add {
  margin-top: 5.556vw;
}

.delList,
.addList {
  overflow: hidden;
  .van-button {
    margin: 1.389vw 2.5vw;
    float: left;
  }
}
</style>